<template>
  <div class="price pad">
    <div class="head">
      <span>健康评测价格设置</span>
      <!-- <el-button @click="openDialog" type="primary" circle icon="el-icon-plus"></el-button> -->
    </div>
    <el-table class="m-t-b" border stripe :data="rules" v-loading="loading">
      <el-table-column label="规则名称" prop="name"></el-table-column>
      <el-table-column label="规则价格">
        <template slot-scope="scope">
          {{scope.row.price + '元'}}
        </template>
      </el-table-column>
      <el-table-column label="购买评测提醒模板编号" prop="purchaseTemplateId"></el-table-column>
      <el-table-column label="评测提醒模板编号" prop="evaluationTemplateId"></el-table-column>
      <el-table-column label="修改时间" prop="updateDate"></el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button type="default" circle icon="el-icon-edit" @click="changePrice(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="'修改' + rules[0].name + '价格'" :visible.sync="showDialog">
      <el-form :model="rule" :rules="formRules" ref="rule" label-position="top">
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="rule.name" readonly />
        </el-form-item>
        <el-form-item label="规则价格(元)" prop="price">
          <el-input v-model="rule.price" type="number"></el-input>
          <!-- <el-input-number v-model="rule.price" :min="1" :max="100"></el-input-number> -->
        </el-form-item>
        <el-form-item label="购买评测提醒模板编号" prop="purchaseTemplateId">
          <el-select filterable v-model="rule.purchaseTemplateId">
            <el-option v-for="(item, i) in messages" :key="i" :value="item.templateId" :label="item.serviceName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评测提醒模板编号" prop="evaluationTemplateId">
          <el-select filterable v-model="rule.evaluationTemplateId">
            <el-option v-for="(item, i) in messages" :key="i" :value="item.templateId" :label="item.serviceName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button type="primary" @click="addRulePrice('rule')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { notifySuccess, formatDate } from '../util'
import {
  getTestPrice,
  getAllServiceMsgTemplate,
  updateTestPrice
} from '../api'

export default {
  name: 'price',
  data () {
    const checkPrice = (rules, value, callback) => {
      if (Number(value) < 0.01) {
        callback(new Error('价格必须大于等于0.01'))
      } else {
        callback()
      }
    }
    return {
      showDialog: false,
      loading: true,
      rules: [{
        name: '',
        price: ''
      }],
      messages: [],
      formRules: {
        name: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        price: [
          { validator: checkPrice, trigger: 'blur' }
        ],
        purchaseTemplateId: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        evaluationTemplateId: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      },
      rule: {
        name: '',
        price: '',
        purchaseTemplateId: '',
        evaluationTemplateId: ''
      }
    }
  },
  methods: {
    hideDialog () {
      this.showDialog = false
    },
    addRulePrice (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          updateTestPrice({
            price: this.rule.price,
            purchaseTemplateId: this.rule.purchaseTemplateId,
            evaluationTemplateId: this.rule.evaluationTemplateId
          })
          .then(res => {
            if (res.data.code === 1) {
              notifySuccess(this)
              this.showDialog = false
              this.fetchPrice()
            } else {
              this.$message.error(res.data.msg || '网络异常!')
            }
          })
          .catch(e => {
            this.$message.error('网络异常!')
          })
        } else {
          return false
        }
      })
    },
    changePrice (data) {
      if (!this.$checkAuth('canEditTestPrice')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.rule = data
      this.showDialog = true
    },
    fetchPrice () {
      this.loading = true
      getTestPrice()
      .then(res => {
        if (res.data.code === 1) {
          this.rules[0].name = res.data.data.priceName || '专家测评'
          this.rules[0].price = res.data.data.price || 0;
          this.rules[0].purchaseTemplateId = res.data.data.purchaseTemplateId;
          this.rules[0].evaluationTemplateId = res.data.data.evaluationTemplateId;
          this.rules[0].evaluationPriceId = res.data.data.evaluationPriceId || '';
          this.rules[0].updateDate = formatDate(res.data.data.updateDate)
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
        this.loading = false
      })
      .catch(e => {
        this.loading = false
        this.$message.error('网络异常!')
      })
    },
    fetchAllMessages () { // 获取服务类消息模板不分页
      getAllServiceMsgTemplate()
      .then(res => {
        if (res.data.code === 1) {
          this.messages = res.data.data || [];
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.$message.error('网络异常!')
      })
    }
  },
  created () {
    this.fetchPrice();
    this.fetchAllMessages()
  }
}
</script>
<style lang="scss">
.price {
  table {
    .cell {
      text-align: center;
    }
  }
}
</style>
